<template>
  <div id="app">
    <a-layout
      id="components-layout-demo-fixed"
      style="height: 100%; width: 100%"
    >
      <!-- 

       -->
      <a-layout-header
        :style="{
          position: 'fixed',
          zIndex: 1,
          width: '100%',
          background: 'white',
        }"
      >
        <div class="logo"><h1>生成器集合</h1></div>
        <a-menu
          theme="light"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px', float: 'right' }"
        >
          <a-menu-item key="1">
            <router-link to="/Ajax">AJAX 生成器</router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/Form"> Form表单代码 生成器 </router-link>
          </a-menu-item>
          <!-- <a-menu-item key="3"> nav 3 </a-menu-item>  -->
        </a-menu>
      </a-layout-header>
      <!-- 

       -->
      <a-layout-content
        :style="{
          padding: '0 50px',
          marginTop: '64px',
          height: 'calc(100% - 64px)',
        }"
      >
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>Hello</a-breadcrumb-item>
          <a-breadcrumb-item>World</a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :style="{
            background: '#fff',
            padding: '24px',
            minHeight: 'calc(100% - 100px)',
          }"
        >
          <router-view></router-view>
        </div>
      </a-layout-content>
      <!-- 

       -->
      <!-- <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer> -->
    </a-layout>
  </div>
</template>
<style>
#app {
  width: 100%;
  height: 100%;
}
#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  line-height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
</style>
